<template>
	<view class="content">
		<view class="header">
			<view class="tabs" style="width: 50%;">
				<uv-tabs :list="tabsList" :current="current" lineColor="#1DB481" :inactiveStyle="{color:'#666666','font-size':'32rpx'}"
					:activeStyle="{color:'#121212','font-size':'32rpx'}" @click="tabsClick" :scrollable="false"></uv-tabs>
			</view>
		</view>
		<view class="box">
			<view class="info" v-if="current == 1">
				<view class="left">
					<view class="status font32">
						{{text}}
					</view>
					<view class="u_colck" v-if="!c_status">
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/technicianadd/time.png" mode="aspectFit">
							</image>
						</view>
						<view class="title font32">
							上钟时间：{{info.start_time}}
						</view>
					</view>
				</view>
				<!-- <view class="call">
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/technicianadd/call.png" mode="aspectFit"></image>
					</view>
					<view class="title font28">
						呼叫
					</view>
				</view> -->
				<view class="d_colck font32" v-if="!c_status && !s_status">
					下钟：{{$u.timeFormat(info.end_time, 'yyyy-mm-dd hh:MM:ss')}}
				</view>
				<view class="time">
					<view class="bold">
						{{ hours}}:{{minutes}}
					</view>
					<view class="regular">
						{{seconds}}
					</view>
				</view>
				<view class="h_info">
					<!-- <view class="house">
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/technicianadd/house.png" mode="aspectFit"></image>
						</view>
						<view class="title font28 font500">
							{{info.house}}
						</view>
					</view> -->
					<view class="technician">
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/technicianadd/tabs.png" mode="aspectFit">
							</image>
						</view>
						<view class="title font32 font500">
							{{coach_info.coach_name}}
						</view>
					</view>
				</view>
				<view class="collapse">
					<l-collapse :accordion="true">
						<l-collapse-item :title="`${order_goods.goods_name}`+'  '+`${order_goods.time_long}` +'分钟'"
							:open="true" titleImg="">
							<view class="contents">
								<image :src="order_goods.goods_cover" mode="aspectFit"></image>
							</view>
						</l-collapse-item>
					</l-collapse>
				</view>
				<view class="" style="display: flex;align-items: center;justify-content: space-between;margin: 16rpx 0;">
					<view class="">
						下单人：{{info.address_info.user_name}}
					</view>
					<view class="">
						下单人号码：{{info.address_info.mobile}}
					</view>
				</view>
				<view class="mark font26">
					备注：{{info.text}}
				</view>
			</view>
			<view class="oderInfo" v-if="current == 0">
				<view class="left" style="margin-bottom: 63rpx;">
					<view class="status font32">
						{{text}}
					</view>
					<view class="u_colck" v-if="!c_status">
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/technicianadd/time.png" mode="aspectFit">
							</image>
						</view>
						<view class="title font32">
							上钟时间：{{info.start_time}}
						</view>
					</view>
				</view>
				<view class="left" style="margin-bottom: 44rpx;" v-if="!c_status && !s_status">
					<view class="ping">
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/technicianadd/contracts.png" mode="aspectFit">
							</image>
						</view>
						<view class="title font32">
							评价
						</view>
					</view>
					<view class="d_colck font32">
						下钟：{{$u.timeFormat(info.end_time, 'yyyy-mm-dd hh:MM:ss')}}
					</view>
				</view>
				<view class="h_info">
					<!-- <view class="house">
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/technicianadd/house.png" mode="aspectFit"></image>
						</view>
						<view class="title font28 font500">
							{{info.house}}
						</view>
					</view> -->
					<view class="technician">
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/technicianadd/tabs.png" mode="aspectFit">
							</image>
						</view>
						<view class="title font32 font500">
							{{coach_info.coach_name}}
						</view>
					</view>
				</view>
				<view class="collapse">
					<l-collapse :accordion="true">
						<l-collapse-item :title="`${order_goods.goods_name}`+'  '+`${info.time_long}` +'分钟'"
							titleImg="" :open="true">
							<view class="contents">
								<image :src="order_goods.goods_cover" mode="aspectFit"></image>
							</view>
						</l-collapse-item>
					</l-collapse>
				</view>
				<view class="" style="display: flex;align-items: center;justify-content: space-between;margin: 16rpx 0;">
					<view class="">
						下单人：{{info.address_info.user_name}}
					</view>
					<view class="">
						下单人号码：{{info.address_info.mobile}}
					</view>
				</view>
				<view class="mark font26">
					备注：{{info.text}}
				</view>
				<!-- <view class="mark">
					<view class="title font26">
						服务情况
					</view>
					<view class="situation font26">
						客户很满意
					</view>
				</view> -->
			</view>
			<view class="btnBox">
				<view class="btnB"></view>
				<view class="yuan"></view>
				<view class="left">
					<view class="a_clock" :class="current == 1 && s_status?'jis':''" @click="a_colck">
						<view class="icon" v-if="current == 0 || !s_status">
							<image src="https://wx.caobenjiankang.com/image/technicianadd/jia.png" mode="aspectFit">
							</image>
						</view>
						<view class="icon" v-else>
							<image src="https://wx.caobenjiankang.com/image/technicianadd/jiaz.png" mode="aspectFit">
							</image>
						</view>
						<view class="title font34">
							加钟
						</view>
					</view>
					<view class="y_btn" v-if="current == 0">
						<view class="btn" :class="c_status?'':'btns'" @click="startStopTimer">
							上钟
						</view>
					</view>
					<view class="btn" :class="s_status?'':'btns'" @click="xiazhong" style="flex-direction: column;"
						v-if="current == 1">
						下钟
					</view>
					<view class="des" @click="to">
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/technicianadd/pay.png" mode="aspectFit">
							</image>
						</view>
						<view class="title font34">
							买单详情
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalSeconds: '',
				hours: '00',
				minutes: '00',
				seconds: '00',
				s_daoji: null,
				current: 0,
				type: 1,
				tabsList: [{
					name: '上钟'
				}, {
					name: '下钟'
				}],
				id: 0,
				info: {},
				coach_info: {},
				order_goods: {},
				store_info: {},
				c_status: true,
				s_status: true,
				text: '等待上钟'
			};
		},
		onLoad(op) {
			this.id = op.id
			if (op.current) {
				this.current = op.current
			}
			this.getData(op.id)
			this.getSatus(op.id)
		},
		onUnload() {
			console.log("左上角的返回事件")
		},
		methods: {
			async getSatus(id) {
				const data = await this.$api.technicianadd.checkShangZhong({
					id: id
				})
				console.log(data, 'data');
				if (data.sx_type == 0) {
					this.text = '未上钟'
					this.current = 0
					this.c_status = true
					this.s_status = false
				}
				if (data.sx_type == 1) {
					this.text = '已上钟'
					this.current = 1
					this.c_status = false
					if (data.time_out == 0) {
						this.shijian(data.min)
						this.s_status = true
					}
					if (data.time_out == 1) {
						this.shijian('0')
						this.s_status = true
						this.text = '已超时'
					}
				}
				if (data.sx_type == 2) {
					this.text = '已下钟'
					this.current = 0
					this.s_status = false
					this.c_status = false
				}

			},
			async getData(id) {
				await this.$api.technicianadd.orderInfo({
					id: id
				}).then(data => {
					this.info = data
					this.coach_info = data.coach_info
					this.order_goods = data.order_goods[0]
					this.store_info = data.store_info
					// this.shijian(data.order_goods[0].time_long)
					// this.totalSeconds = Number(data.order_goods[0].time_long) * 60
					// this.hours = Math.floor(Number(data.order_goods[0].time_long) * 60 / 3600);
					// this.minutes = Math.floor((Number(data.order_goods[0].time_long) * 60 % 3600) / 60);
					// this.seconds = Number(data.order_goods[0].time_long) * 60 % 60;
				}).catch(err => {
					console.log(err, 'err');
				})
			},
			shijian(time) {
				this.totalSeconds = Number(time) * 60
				this.hours = Math.floor(Number(time) * 60 / 3600);
				this.minutes = Math.floor((Number(time) * 60 % 3600) / 60);
				this.seconds = Number(time) * 60 % 60;
				this.daojishi()
			},
			async xiazhong() {
				if (!this.s_status) return
				await this.$api.technicianadd.coachShangZhong({
					type: 2,
					id: this.id
				}).then(data => {
					this.getSatus(this.id)
					clearInterval(this.s_daoji);
					this.hours = '00'
					this.minutes = '00'
					this.seconds = '00'
				}).catch(err => {
					console.log(err, 'err');
				})
			},
			tabsClick(e) {
				this.current = e.index
				if (e.index == 0) {
					this.type = 1
				}
				if (e.index == 1) {
					this.type = 2
				}
			},
			async startStopTimer() {
				if (!this.c_status) return
				await this.$api.technicianadd.coachShangZhong({
					type: this.type,
					id: this.id
				}).then(data => {
					this.current = 1
					// this.daojishi()
					this.getSatus(this.id)
				}).catch(err => {
					console.log(err, 'err');
				})
			},
			daojishi() {
				this.daoji()
				this.s_daoji = setInterval(() => {
					this.daoji()
				}, 1000)
			},
			daoji() {
				if (this.totalSeconds > 0) {
					this.hours = Math.floor(this.totalSeconds / 3600);
					this.minutes = Math.floor((this.totalSeconds % 3600) / 60);
					this.seconds = this.totalSeconds % 60;
					this.totalSeconds--;
				} else {
					clearInterval(this.s_daoji);
				}
			},
			a_colck() {
				if (!this.s_status) return
				uni.navigateTo({
					url:'/user/pages/bell/list?id='+this.id+'&coach_id='+this.info.coach_id
				})
			},
			to() {
				uni.navigateTo({
					url: '/technicianadd/pages/detail/detail?id=' + this.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			display: flex;
			justify-content: center;
			padding: 37rpx 0 18rpx 0;
			background-color: #fff;
		}

		.box {
			padding: 14rpx 29rpx;

			.info {
				padding: 28rpx 24rpx;
				background-color: #fff;

				.left {
					margin-bottom: 60rpx;
					justify-content: space-between;

					.status {
						color: #999999;
					}

					.u_colck {
						display: flex;
						align-items: center;

						.icon {
							width: 26rpx;
							height: 26rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 26rpx;
								height: 26rpx;
							}
						}

						.title {
							color: #999999;
						}
					}
				}


				.call {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-bottom: 50rpx;

					.icon {
						width: 27rpx;
						height: 32rpx;
						display: flex;
						align-items: center;
						margin-right: 8rpx;

						image {
							width: 27rpx;
							height: 32rpx;
						}
					}

					.title {
						color: #FF8E00;
					}
				}

				.d_colck {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				.time {
					color: #AAAAAA;
					position: relative;
					display: flex;
					justify-content: center;
					margin-bottom: 90rpx;

					.bold {
						font-weight: 400;
						font-size: 170rpx;
						color: #AAAAAA;
					}

					.regular {
						position: absolute;
						font-weight: 400;
						font-size: 60rpx;
						color: #AAAAAA;
						right: 30rpx;
						bottom: 30rpx;
					}
				}

				.h_info {
					display: flex;
					align-items: center;
					padding: 26rpx 0 26rpx 30rpx;
					margin-bottom: 26rpx;

					.house {
						display: flex;
						align-items: center;
						margin-right: 28rpx;

						.icon {
							width: 31rpx;
							height: 30rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 31rpx;
								height: 30rpx;
							}
						}

						.title {}
					}

					.technician {
						display: flex;
						align-items: center;

						.icon {
							width: 29rpx;
							height: 29rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 29rpx;
								height: 29rpx;
							}
						}

						.title {}
					}
				}

				.collapse {
					position: relative;
					margin-bottom: 30rpx;

					.contents {
						image {
							width: 240rpx;
							height: 240rpx;
						}
					}

					/deep/.l-collapse {
						.l-collapse-item {
							.l-collapse-item__title {
								.l-collapse-item__title-wrap {
									.l-collapse-item__title-box {
										.l-collapse-item__title-img {
											width: 8rpx;
										}

										.l-collapse-item__title-text {
											font-size: 26rpx;
											color: #333333;
										}
									}
								}

								.l-collapse-item__title-arrow {
									position: absolute;

									.icon-xiala {
										font-size: 40rpx;
									}
								}
							}
						}
					}
				}

				.mark {}
			}

			.oderInfo {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 18rpx;

				.left {
					justify-content: space-between;

					.status {}

					.u_colck {
						display: flex;
						align-items: center;

						.icon {
							width: 26rpx;
							height: 26rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 26rpx;
								height: 26rpx;
							}
						}

						.title {
							color: #999999;
						}
					}

					.ping {
						display: flex;
						align-items: center;

						.icon {
							width: 28rpx;
							height: 28rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 28rpx;
								height: 28rpx;
							}
						}

						.title {
							color: #1EB481;
						}
					}

					.d_colck {}
				}

				.h_info {
					display: flex;
					align-items: center;
					padding: 26rpx 0 26rpx 30rpx;
					margin-bottom: 26rpx;

					.house {
						display: flex;
						align-items: center;
						margin-right: 28rpx;

						.icon {
							width: 31rpx;
							height: 30rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 31rpx;
								height: 30rpx;
							}
						}

						.title {}
					}

					.technician {
						display: flex;
						align-items: center;

						.icon {
							width: 29rpx;
							height: 29rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 29rpx;
								height: 29rpx;
							}
						}

						.title {}
					}
				}

				.collapse {
					position: relative;
					margin-bottom: 30rpx;

					.contents {
						image {
							width: 240rpx;
							height: 240rpx;
						}
					}

					/deep/.l-collapse {
						.l-collapse-item {
							.l-collapse-item__title {
								.l-collapse-item__title-wrap {
									.l-collapse-item__title-box {
										.l-collapse-item__title-img {
											width: 8rpx;
										}

										.l-collapse-item__title-text {
											font-size: 26rpx;
											color: #333333;
										}
									}
								}

								.l-collapse-item__title-arrow {
									position: absolute;

									.icon-xiala {
										font-size: 40rpx;
									}
								}
							}
						}
					}
				}

				.mark {
					.title {
						color: #333333;
					}

					.situation {
						padding: 33rpx 46rpx;
						color: #333333;
					}
				}
			}

			.btnBox {
				position: relative;
				height: 174rpx;
				margin-top: 50rpx;

				.btnB {
					height: 162rpx;
					box-shadow: 0rpx 1rpx 5rpx 1rpx rgba(208, 215, 229, 0.2);
					border-radius: 28rpx 28rpx 10rpx 10rpx;
					border: 1px solid #D0D7E5;
					position: absolute;
					width: 100%;
					bottom: 0;
					z-index: 1;
					background: #fff;
				}

				.yuan {
					position: absolute;
					width: 174rpx;
					height: 174rpx;
					border-radius: 50%;
					background: #fff;
					border: 2rpx solid #D0D7E5;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}

				.left {
					height: 162rpx;
					position: absolute;
					width: 100%;
					z-index: 2;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					bottom: 0;

					.a_clock {
						display: flex;
						align-items: center;
						width: 219rpx;
						height: 87rpx;
						background: #FAFAFA;
						border-radius: 100rpx;
						border: 1px solid #D7DAE0;
						justify-content: center;

						.icon {
							width: 36rpx;
							height: 36rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 36rpx;
								height: 36rpx;
							}
						}

						.title {
							color: #D7DAE0;
						}
					}

					.jis {
						border: 1px solid #545454;

						.title {
							color: #545454;
						}
					}

					.y_btn {
						.btn {
							width: 155rpx;
							height: 155rpx;
							border-radius: 50%;
							background: #1EB481;
							border: 11rpx solid #fff;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #fff;
							margin-bottom: 25rpx;
						}
					}

					.btn {
						width: 155rpx;
						height: 155rpx;
						border-radius: 50%;
						background: #1EB481;
						border: 11rpx solid #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						margin-bottom: 25rpx;
					}

					.btns {
						background: #999999 !important;
					}

					.des {
						display: flex;
						align-items: center;
						width: 219rpx;
						height: 87rpx;
						background: #FAFAFA;
						border-radius: 100rpx;
						border: 1px solid #545454;
						justify-content: center;

						.icon {
							width: 36rpx;
							height: 36rpx;
							display: flex;
							align-items: center;
							margin-right: 8rpx;

							image {
								width: 36rpx;
								height: 36rpx;
							}
						}

						.title {
							color: #545454;
						}
					}
				}
			}
		}
	}
</style>